<template>
  <div class="profile-page">
    <header class="profile-header">
      <h1>玩家 信息</h1>
      <el-button @click="openEditModal" class="edit-button" type="primary">点击编辑</el-button>
    </header>
    
    <div class="profile-content">
      <div class="profile-info">
        <img :src="profilePicture" alt="Profile Picture" class="profile-picture" />
        <div class="info-details">
          <h2>{{ user.name }}</h2>
          <p class="profession">{{ user.profession }}</p>
          <p class="email">{{ user.email }}</p>
        </div>
      </div>
      
      <div class="user-activities">
        <h3>近期活动</h3>
        <el-list>
          <el-list-item v-for="activity in user.activities" :key="activity.id">{{ activity.description }}</el-list-item>
        </el-list>
      </div>
    </div>

    <div class="social-links">
      <h3>社交媒体</h3>
      <div class="links">
        <el-link href="https://space.bilibili.com" target="_blank">
          <i class="fab fa-bilibili"></i> Bilibili
        </el-link>
        <el-link href="https://www.weibo.com/" target="_blank">
          <i class="fab fa-weibo"></i> 微博
        </el-link>
        <el-link href="https://mail.qq.com" target="_blank">
          <i class="fab fa-qq"></i> QQ
        </el-link>
      </div>
    </div>

    <!-- 个人简介 -->
    <div class="bio-section">
      <h3>关于我</h3>
      <div class="bio-content">
        <p>{{ user.bio }}</p>
      </div>
    </div>

    <!-- 游戏统计 -->
    <div class="stats-section">
      <h3>游戏统计</h3>
      <div class="stats-links">
        <el-card class="stat-item" v-for="(stat, index) in gameStats" :key="index" shadow="hover">
          <p>{{ stat.label }}: {{ stat.value }}</p>
        </el-card>
      </div>
    </div>

    <el-dialog :visible.sync="isEditModalOpen" title="编辑玩家信息">
      <el-form :model="editForm">
        <el-form-item label="姓名">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="职业">
          <el-input v-model="editForm.profession"></el-input>
        </el-form-item>
        <el-form-item label="电子邮件">
          <el-input v-model="editForm.email" type="email"></el-input>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input type="textarea" v-model="editForm.bio"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="closeEditModal">取消</el-button>
        <el-button type="primary" @click="saveChanges">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import profilePicture from '../assets/touxiang.jpg';
 
export default {
  name: 'Profile',
  data() {
    return {
      profilePicture,
      user: {
        name: 'huo nan',
        profession: '亚海悬城一级突破手',
        email: 'qwwererettt@outlook.com',
        activities: [
          { id: 1, description: '成功安装C4' },
          { id: 2, description: '力克千钧' },
          { id: 3, description: '王牌精锐 ACE' },
        ],
        bio: '热爱游戏和网页开发，喜欢创造身临其境的体验。时刻寻找新的挑战！',
      },
      gameStats: [
        { label: '玩过的游戏数量', value: '15' },
        { label: '成就', value: '8' },
        { label: '总游戏时间', value: '120 小时' },
      ],
      isEditModalOpen: false,
      editForm: {
        name: '',
        profession: '',
        email: '',
        bio: '',
      },
    };
  },
  methods: {
    openEditModal() {
      this.editForm = { ...this.user };
      this.isEditModalOpen = true;
    },
    closeEditModal() {
      this.isEditModalOpen = false;
    },
    saveChanges() {
      this.user = { ...this.editForm };
      this.closeEditModal();
      this.$message.success('编辑成功');
    },
  },
};
</script>

<style scoped>
.profile-page {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edit-button {
  width: 100px; 
  height: 40px;
}

.profile-content {
  display: flex;
  margin-top: 20px;
}

.profile-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.profile-picture {
  border-radius: 50%;
  width: 80px; 
  height: 80px; 
  margin-right: 20px;
}

.info-details h2 {
  margin: 0;
  font-size: 24px;
}

.profession {
  font-style: italic;
  color: #777;
}

.email {
  color: #555;
}

.user-activities {
  margin-left: 40px;
}

.user-activities h3 {
  margin-top: 0;
}

.social-links h3 {
  margin-top: 0;
}

.bio-section, .stats-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f0f4ff;
  border-radius: 8px;
}

.stats-section .stats-links {
  display: flex; 
  flex-direction: column; 
}

.stat-item {
  margin-bottom: 10px;
}

.social-links .links {
  display: flex; 
  gap: 20px; 
}

.social-links a {
  text-decoration: none;
}

</style>